{% extends "base.html" %}

{% block title %}首页 - 个人博客{% endblock %}

{% block content %}
<!-- 个人介绍区域 -->
<div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg shadow-lg mb-8 overflow-hidden">
    <div class="p-8 text-white">
        <div class="flex items-center space-x-6">
            <!-- 头像 -->
            <div class="flex-shrink-0">
                {% if admin_user and admin_user.avatar %}
                <div class="w-24 h-24 rounded-full overflow-hidden shadow-lg">
                    <img src="{{ admin_user.avatar }}" alt="{{ admin_user.name or admin_user.username }}" class="w-full h-full object-cover">
                </div>
                {% else %}
                <div class="w-24 h-24 bg-white rounded-full flex items-center justify-center shadow-lg">
                    <i class="fas fa-user text-4xl text-blue-600"></i>
                </div>
                {% endif %}
            </div>
            
            <!-- 个人信息 -->
            <div class="flex-1">
                <h1 class="text-3xl font-bold mb-2">{{ admin_user.name or admin_user.username if admin_user else '博主姓名' }}</h1>
                <p class="text-blue-100 text-lg mb-4">{{ admin_user.bio or '全栈开发者 | 技术博主 | 开源爱好者' if admin_user else '全栈开发者 | 技术博主 | 开源爱好者' }}</p>
                <p class="text-blue-50 leading-relaxed">
                    热爱编程，专注于 Web 开发、Python 和前端技术。喜欢分享技术心得，记录学习过程，与大家一起成长。欢迎来到我的个人博客！
                </p>
                
                <!-- 社交链接 -->
                <div class="flex items-center space-x-4 mt-4">
                    <div class="text-white hover:text-blue-200 transition-colors" title="GitHub">
                        <i class="fab fa-github text-xl"></i>
                    </div>
                    <div class="text-white hover:text-blue-200 transition-colors" title="Twitter">
                        <i class="fab fa-twitter text-xl"></i>
                    </div>
                    {% if admin_user and admin_user.website %}
                    <a href="{{ admin_user.website }}" target="_blank" class="text-white hover:text-blue-200 transition-colors" title="个人网站">
                        <i class="fas fa-globe text-xl"></i>
                    </a>
                    {% endif %}
                    {% if admin_user and admin_user.email %}
                    <a href="mailto:{{ admin_user.email }}" class="text-white hover:text-blue-200 transition-colors" title="邮箱">
                        <i class="fas fa-envelope text-xl"></i>
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="grid grid-cols-3 gap-8">
    <!-- 主要内容区域 -->
    <div class="col-span-2">
    <!-- 文章列表 -->
        <div class="space-y-8">
            {% if posts.items %}
                {% for post in posts.items %}
                    {% if post.layout_mode == 'no-image' %}
                        <!-- 无图模式 -->
                        <article class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden">
                            <div class="p-6">
                                <h2 class="text-2xl font-bold text-gray-900 mb-4">
                                    <a href="{{ post.html_path }}" class="hover:text-blue-600 transition-colors">
                                        {{ post.title }}
                                    </a>
                                </h2>

                                <div class="flex items-center gap-6 text-sm text-gray-600 mb-4">
                                    <span class="flex items-center">
                                        <i class="fas fa-user mr-2"></i>
                                        {{ post.author.name or post.author.username }}
                                    </span>
                                    <span class="flex items-center">
                                        <i class="fas fa-calendar mr-2"></i>
                                        {{ post.published_at.strftime('%Y-%m-%d') if post.published_at else post.created_at.strftime('%Y-%m-%d') }}
                                    </span>
                                    <span class="flex items-center">
                                        <i class="fas fa-eye mr-2"></i>
                                        {{ post.view_count }}
                                    </span>
                                    <span class="flex items-center">
                                        <i class="fas fa-heart mr-2"></i>
                                        {{ post.like_count }}
                                    </span>
                                    <span class="flex items-center">
                                        <i class="fas fa-comment mr-2"></i>
                                        {{ post.comment_count }}
                                    </span>
                                </div>

                                {% if post.excerpt %}
                                <div class="text-gray-700 mb-4 leading-relaxed">
                                    {{ post.excerpt }}
                                </div>
                                {% endif %}

                                {% if post.tags %}
                                <div class="flex flex-wrap gap-2 mb-4">
                                    {% for tag in post.tags %}
                                    <a href="{{ url_for('main.tag_posts', tag_id=tag.id) }}" class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 hover:bg-blue-200 transition-colors">
                                        <i class="fas fa-tag mr-1"></i>
                                        {{ tag.name }}
                                    </a>
                                    {% endfor %}
                                </div>
                                {% endif %}

                                <div class="flex items-center justify-between">
                                    <a href="{{ post.html_path }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                                        <i class="fas fa-arrow-right mr-2"></i>
                                        阅读全文
                                    </a>
                                </div>
                            </div>
                        </article>

                    {% elif post.layout_mode == 'single-image' %}
                        <!-- 单图模式 -->
                        <article class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden">
                            {% if post.cover_image %}
                            <div class="h-48 bg-gray-200 overflow-hidden">
                                <img src="{{ post.cover_image }}" alt="{{ post.title }}" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300">
                            </div>
                            {% endif %}
                            <div class="p-6">
                                <h2 class="text-2xl font-bold text-gray-900 mb-4">
                                    <a href="{{ post.html_path }}" class="hover:text-blue-600 transition-colors">
                                        {{ post.title }}
                                    </a>
                </h2>
                
                                <div class="flex items-center gap-6 text-sm text-gray-600 mb-4">
                                    <span class="flex items-center">
                                        <i class="fas fa-user mr-2"></i>
                                        {{ post.author.name or post.author.username }}
                                    </span>
                                    <span class="flex items-center">
                                        <i class="fas fa-calendar mr-2"></i>
                                        {{ post.published_at.strftime('%Y-%m-%d') if post.published_at else post.created_at.strftime('%Y-%m-%d') }}
                                    </span>
                                    <span class="flex items-center">
                                        <i class="fas fa-eye mr-2"></i>
                                        {{ post.view_count }}
                                    </span>
                                    <span class="flex items-center">
                                        <i class="fas fa-heart mr-2"></i>
                                        {{ post.like_count }}
                                    </span>
                                    <span class="flex items-center">
                                        <i class="fas fa-comment mr-2"></i>
                                        {{ post.comment_count }}
                                    </span>
                                </div>

                                {% if post.excerpt %}
                                <div class="text-gray-700 mb-4 leading-relaxed">
                                    {{ post.excerpt }}
                                </div>
                                {% endif %}

                                <div class="flex items-center justify-between">
                                    <a href="{{ post.html_path }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                                        <i class="fas fa-arrow-right mr-2"></i>
                                        阅读全文
                                    </a>
                                </div>
                            </div>
                        </article>

                    {% elif post.layout_mode == 'three-image' %}
                        <!-- 三图模式 -->
                        <article class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden">
                            <div class="p-6">
                                <h2 class="text-2xl font-bold text-gray-900 mb-4">
                                    <a href="{{ post.html_path }}" class="hover:text-blue-600 transition-colors">
                                        {{ post.title }}
                                    </a>
                                </h2>

                                <div class="flex items-center gap-6 text-sm text-gray-600 mb-4">
                                    <span class="flex items-center">
                                        <i class="fas fa-user mr-2"></i>
                                        {{ post.author.name or post.author.username }}
                    </span>
                                    <span class="flex items-center">
                                        <i class="fas fa-calendar mr-2"></i>
                                        {{ post.published_at.strftime('%Y-%m-%d') if post.published_at else post.created_at.strftime('%Y-%m-%d') }}
                    </span>
                                    <span class="flex items-center">
                                        <i class="fas fa-eye mr-2"></i>
                                        {{ post.view_count }}
                    </span>
                                    <span class="flex items-center">
                                        <i class="fas fa-heart mr-2"></i>
                                        {{ post.like_count }}
                    </span>
                                    <span class="flex items-center">
                                        <i class="fas fa-comment mr-2"></i>
                                        {{ post.comment_count }}
                    </span>
                </div>
                
                                <!-- 三图展示 -->
                                <div class="grid grid-cols-3 gap-4 mb-4">
                                    <div class="h-32 bg-gray-200 rounded-lg overflow-hidden">
                                        {% if post.cover_image %}
                                        <img src="{{ post.cover_image }}" alt="{{ post.title }}" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300">
                                        {% else %}
                                        <div class="w-full h-full flex items-center justify-center text-gray-400">
                                            <i class="fas fa-image text-2xl"></i>
                                        </div>
                                        {% endif %}
                                    </div>
                                    <div class="h-32 bg-gray-200 rounded-lg overflow-hidden">
                                        <div class="w-full h-full flex items-center justify-center text-gray-400">
                                            <i class="fas fa-image text-2xl"></i>
                                        </div>
                                    </div>
                                    <div class="h-32 bg-gray-200 rounded-lg overflow-hidden">
                                        <div class="w-full h-full flex items-center justify-center text-gray-400">
                                            <i class="fas fa-image text-2xl"></i>
                                        </div>
                                    </div>
                </div>

                                {% if post.excerpt %}
                                <div class="text-gray-700 mb-4 leading-relaxed">
                                    {{ post.excerpt }}
                </div>
                                {% endif %}

                                <div class="flex items-center justify-between">
                                    <a href="{{ post.html_path }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                                        <i class="fas fa-arrow-right mr-2"></i>
                        阅读全文
                    </a>
                                </div>
                            </div>
                        </article>
                    {% endif %}
                {% endfor %}
            {% else %}
                <div class="bg-white rounded-lg shadow-md p-8 text-center">
                    <i class="fas fa-file-alt text-6xl text-gray-300 mb-4"></i>
                    <p class="text-gray-600 text-lg">暂无文章</p>
                </div>
            {% endif %}
        </div>
            
            <!-- 分页 -->
            {% if posts.pages > 1 %}
            <div class="mt-12">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <div class="flex items-center justify-between">
                        <!-- 分页信息 -->
                        <div class="text-sm text-gray-600">
                            显示第 {{ (posts.page - 1) * posts.per_page + 1 }} - {{ posts.page * posts.per_page if posts.page * posts.per_page <= posts.total else posts.total }} 条，共 {{ posts.total }} 条记录
                        </div>
                        
                        <!-- 分页导航 -->
                        <nav class="flex items-center space-x-1">
                            <!-- 首页 -->
                            {% if posts.has_prev %}
                            <a href="{{ url_for('main.index', page=1) }}" class="px-3 py-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" title="首页">
                                <i class="fas fa-angle-double-left"></i>
                            </a>
                            {% else %}
                            <span class="px-3 py-2 text-gray-300 rounded-lg" title="首页">
                                <i class="fas fa-angle-double-left"></i>
                            </span>
                            {% endif %}
                            
                            <!-- 上一页 -->
                            {% if posts.has_prev %}
                            <a href="{{ url_for('main.index', page=posts.prev_num) }}" class="px-3 py-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" title="上一页">
                                <i class="fas fa-chevron-left"></i>
                            </a>
                            {% else %}
                            <span class="px-3 py-2 text-gray-300 rounded-lg" title="上一页">
                                <i class="fas fa-chevron-left"></i>
                            </span>
                            {% endif %}
                            
                            <!-- 页码 -->
                            {% for page_num in posts.iter_pages() %}
                                {% if page_num %}
                                    {% if page_num != posts.page %}
                                    <a href="{{ url_for('main.index', page=page_num) }}" class="px-3 py-2 text-gray-700 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">{{ page_num }}</a>
                                    {% else %}
                                    <span class="px-3 py-2 bg-blue-600 text-white rounded-lg font-medium">{{ page_num }}</span>
                                    {% endif %}
                                {% else %}
                                <span class="px-3 py-2 text-gray-400">...</span>
                                {% endif %}
                            {% endfor %}
                            
                            <!-- 下一页 -->
                            {% if posts.has_next %}
                            <a href="{{ url_for('main.index', page=posts.next_num) }}" class="px-3 py-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" title="下一页">
                                <i class="fas fa-chevron-right"></i>
                            </a>
                            {% else %}
                            <span class="px-3 py-2 text-gray-300 rounded-lg" title="下一页">
                                <i class="fas fa-chevron-right"></i>
                            </span>
                            {% endif %}
                            
                            <!-- 末页 -->
                            {% if posts.has_next %}
                            <a href="{{ url_for('main.index', page=posts.pages) }}" class="px-3 py-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" title="末页">
                                <i class="fas fa-angle-double-right"></i>
                            </a>
                            {% else %}
                            <span class="px-3 py-2 text-gray-300 rounded-lg" title="末页">
                                <i class="fas fa-angle-double-right"></i>
                            </span>
                            {% endif %}
                        </nav>
                    </div>
                </div>
            </div>
            {% endif %}
    </div>
    
    <!-- 侧边栏 -->
    <div class="space-y-6">
        <!-- 分类列表 -->
        {% if categories %}
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                <i class="fas fa-folder mr-2"></i>分类
            </h3>
            <ul class="space-y-2">
                {% for category in categories %}
                <li>
                    <a href="{{ url_for('main.category_posts', category_id=category.id) }}" class="flex items-center justify-between text-gray-700 hover:text-blue-600 transition-colors">
                        <span>{{ category.name }}</span>
                        <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded-full text-xs">{{ category.post_count }}</span>
                    </a>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
        
        <!-- 标签云 -->
        {% if tags %}
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                <i class="fas fa-tags mr-2"></i>标签
            </h3>
            <div class="flex flex-wrap gap-2">
                {% for tag in tags %}
                <a href="{{ url_for('main.tag_posts', tag_id=tag.id) }}" class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-700 hover:bg-blue-200 hover:text-blue-800 transition-colors">
                    <i class="fas fa-tag mr-1"></i>
                    {{ tag.name }}
                </a>
                {% endfor %}
            </div>
        </div>
        {% endif %}
        
        <!-- 热门文章 -->
        {% if popular_posts %}
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                <i class="fas fa-fire mr-2"></i>热门文章
            </h3>
            <ul class="space-y-3">
                {% for post in popular_posts %}
                <li>
                    <a href="{{ post.html_path }}" class="block text-gray-700 hover:text-blue-600 transition-colors">
                        <div class="font-medium">{{ post.title }}</div>
                        <div class="text-sm text-gray-500 flex items-center mt-1">
                            <i class="fas fa-eye mr-1"></i>
                            {{ post.view_count }} 次浏览
                        </div>
                    </a>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}